<template>
  <div class="housecomment-content">
    <p class="comment-title">房源的评价({{commentList.length}})</p>
    <div class="nocomment-box" v-if="commentList.length == 0">此房子还没有评论~</div>
    <div class="commenttext-box" v-for="item of commentList" :key="item.id" v-else>
      <div class="commentuserinfo-box">
        <img :src="staticpath+item.user.header" v-if="item.user.header" />
        <img src="~/assets/img/headImg/defaultHead.jpg" class="headerimg-box" v-else />
        <span>{{item.user.nickName}}</span>
      </div>
      <div class="commenttext-box">{{item.context}}</div>
    </div>
  </div>
</template>

<script>
import { getHouseComment } from "network/housedetail";

export default {
  name: "housecomment",
  data() {
    return {
      commentList: [],
      staticpath: localStorage.getItem("staticpath"),
    };
  },
  methods: {},
  created() {
    let houseId = this.$route.query.houseId;
    getHouseComment({ houseId }).then((res) => {
      console.log(res);
      this.commentList = res.data;
    });
  },
};
</script>

<style scoped>
.housecomment-content {
  border-top: 10px solid #eee;
  padding: 20px 20px 0;
}
.comment-title {
  font-size: 16px;
  font-weight: 700;
}
.commentuserinfo-box {
  height: 25px;
  margin-top: 10px;
  margin-bottom: 8px;
}
.commentuserinfo-box img {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 10px;
}
.commentuserinfo-box > span {
  font-size: 12px;
}
.commenttext-box {
  font-size: 12px;
}
.nocomment-box {
  margin-top: 10px;
  font-size: 13px;
}
</style>